// @flow

import React, { Component } from 'react';
import {View, Image, Text, StatusBar, Platform, StyleSheet, TouchableOpacity, Dimensions} from 'react-native';

import Common from './common';

const STATUS_BAR_HEIGHT = StatusBar.currentHeight || 20;

const totalWidth = Dimensions.get('window').width;
const HEADER_HEIGHT = totalWidth*0.112;
const styles = StyleSheet.create({
  toolbar: {
    backgroundColor: '#ff4546',
  },
  status: {
    height: STATUS_BAR_HEIGHT,
  },
  header: {
    height: HEADER_HEIGHT,
    flexDirection: 'row',
    paddingHorizontal: totalWidth*0.02,
    alignItems: 'center',
    justifyContent: 'center',
  },
  titleText: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 20,
  },
  leftItem: {
    flex: 1,
    alignItems: 'flex-start',
  },
  centerItem: {
    flex: 4,
    alignItems: 'center',
  },
  rightItem: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
  },
  itemWrapper: {
    width: totalWidth*0.08,
    height: HEADER_HEIGHT,
    justifyContent: 'center',
    alignItems: 'center',
  },
  itemWrapper_Text:{
  	width:  70,
    height: 30,
    justifyContent: 'center',
    alignItems: 'center',
  },
  itemText: {
    letterSpacing: 1,
    fontSize: 14,
    color: 'white',
  },
  itemImg: {
    resizeMode: 'contain'
  }
});

type Layout =
    'default'      // Use platform defaults (icon on Android, text on iOS)
  | 'icon'         // Always use icon
  | 'title';       // Always use title

type Foreground = 'light' | 'dark';

type Item = {
  title?: string;
  icon?: number;
  layout?: Layout;
  onPress?: () => void;
};

type Props = {
  title?: string;
  leftItem?: Item;
  rightItem?: Item;
  extraItem?: Item;
  foreground?: Foreground;
  style?: any;
  children?: any;
};

const defaultProps = {
  title: null,
  leftItem: null,
  rightItem: null,
  extraItem: null,
  foreground: null,
  style: null,
  children: null,
};

class Header extends Component {
  static height: number

  static defaultProps = defaultProps

  props: Props
  constructor(props) {
    super(props);
    this.state = {
      checkDevice: '',
    }
  }
  componentWillMount(){
    Common.checkDevice((checkDevice) => {
      this.setState({checkDevice});
    });
  }

  render() {
    const { leftItem, title, rightItem, extraItem, foreground } = this.props;
    const titleColor = foreground === 'dark' ? '#032250' : 'white';
    const itemsColor = foreground === 'dark' ? '#7F91A7' : 'white';
    const align = extraItem && rightItem?'space-between':'flex-end';

    const content = React.Children.count(this.props.children) === 0
      ? (<Text style={[styles.titleText, { color: titleColor }]}>
        {title}
      </Text>)
      : this.props.children;
    return (
      <View style={styles.toolbar}>
        <View style={[styles.status,this.state.checkDevice == 'x'?{height:totalWidth*0.08}:null]}/>
        <View style={[styles.header, this.props.style]}>
          <View style={styles.leftItem}>
            <ItemWrapperIOS color={itemsColor} item={leftItem} style={{width: totalWidth*0.1}} />
          </View>
          <View
            accessible
            accessibilityLabel={title}
            accessibilityTraits="header"
            style={styles.centerItem}
          >
            {content}
          </View>
          <View style={[styles.rightItem, {justifyContent: align}]}>
            <ItemWrapperIOS color={itemsColor} item={extraItem} />
            <ItemWrapperIOS color={itemsColor} item={rightItem} />
          </View>
        </View>
      </View>
    );
  }

}

class ItemWrapperIOS extends Component {
  props: {
    item: Item;
    color: string;
  };
	
  render() {
    const { item, color } = this.props;
    if (!item) {
      return null;
    }

    let content;
    const { title, icon, layout, onPress} = item;
    
    if (layout !== 'icon' && title) {
      content = (
	        <View style={{width:70,flex:1,backgroundColor:"#ff7979",borderRadius:2,flexDirection:"row",alignItems:"center",justifyContent:"center"}}>
	          <Text style={[styles.itemText,{color,}]}>{title.toUpperCase()}</Text>
	        </View>
      );
      return (
	      <TouchableOpacity
	        accessibilityLabel={title}
	        accessibilityTraits="button"
	        onPress={onPress}
	        style={[styles.itemWrapper_Text,{flexDirection:"column",}]}
	      >
	        {content}
	      </TouchableOpacity>
    	);
    } else if (icon) {
      content = <Image style={styles.itemImg} source={icon} />;
      return (
	      <TouchableOpacity
	        accessibilityLabel={title}
	        accessibilityTraits="button"
	        onPress={onPress}
	        style={[styles.itemWrapper,this.props.style]}
	      >
	        {content}
	      </TouchableOpacity>
    	);
    }

    
  }
}

const ToolbarComponent = Header;
ToolbarComponent.height = HEADER_HEIGHT;

export default ToolbarComponent;